<template>
	<view class="register-content">
		<u-navbar title="注册"></u-navbar>
		<u-form :model="form" ref="uForm" :error-type="errorType">
			<u-form-item label="学号" prop="studentID">
				<u-input v-model="form.studentID" type="number" placeholder="请输入学号" />
			</u-form-item>

			<u-form-item label="姓名" prop="studentName">
				<u-input v-model="form.studentName" type="text" placeholder="请输入姓名" />
			</u-form-item>
			<u-form-item label="性别" prop="gender">
				<u-radio-group v-model="form.gender">
					<u-radio shape="circle" v-for="(item, index) in gender" :key="index" :name="item.name">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
		</u-form>
		<u-button type="primary" @click="submit">注册</u-button>

		<!-- 以下为注册时，必要的其他弹出组件 -->
		<u-toast ref="uToast" />
		<u-modal v-model="isShowPopup" title="确认" :show-cancel-button="true" confirm-text="信息正确" confirm-color="#2979ff"
			cancel-text="还需修改" cancel-color="#fa3534" @confirm="confirmInfoFinally" @cancel="cancelInfo">
			<view class="slot-content">
				<rich-text :nodes="information"></rich-text>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 表单填写错误的提示形式
				errorType: ['message'],
				// 是否显示提示框
				isShowPopup: false,
				// 提示框中的内容，此内容在 submit() 方法中进行赋值
				information: '',
				// 表单数据
				form: {
					// 学号
					studentID: '',
					// 学生姓名
					studentName: '',
					// 性别
					// 需要注意的是，此处性别并非为 0 或 1 表示男性女性
					// 而是 男孩子 或 女孩子 三个字
					// 如若需要，未来将会进行修改
					gender: ''
				},
				// 性别列表，用于渲染 radio
				gender: [{
						index: 0,
						name: '男'
					},
					{
						index: 1,
						name: '女'
					}
				],
				// 表单验证的校验规则
				rules: {
					studentID: [{
							required: true,
							message: '请输入学号',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur']
						},
						{
							type: 'number',
							message: '学号必须为数字',
							trigger: ['change', 'blur']
						},
						{
							min: 8,
							message: '学号不得少于 8 位',
							trigger: ['change', 'blur']
						}
					],
					studentName: [{
							required: true,
							message: '请输入姓名',
							trigger: ['change', 'blur']
						},
						{
							min: 2,
							message: '姓名不能小于 2 个字',
							trigger: ['change', 'blur']
						}
					],
					gender: [{
						required: true,
						message: '请选择性别',
						trigger: ['change', 'blur']
					}],

				},
			}
		},
		// 整个页面被加载时调用的方法
		onLoad(option) {
			console.log(option)
			// this.$data.departmentLabel = option.departmentValue
			this.$data.form.studentID = option.studentID
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						// 表单验证通过时将提示框中的内容进行赋值
						this.$data.information =
							"学号：" + this.$data.form.studentID +
							"<br/>姓名：" + this.$data.form.studentName +
							"<br/>性别：" + this.$data.form.gender
						// 显示提示框
						this.$data.isShowPopup = true
					} else {
						// console.log('验证失败');
						// 提示用户信息未输入完成
						this.$refs.uToast.show({
							title: '请填写完整信息',
							type: 'error',
							icon: false,
							position: 'bottom'
						});
					}
				})
			},
			// 提示框中再次确认信息无误后调用此方法
			confirmInfoFinally(value) {
				let _this = this;
				let sexBool = this.$data.form.gender === '男' ? true : false;
				uni.setStorage({
					key: 'UserMsg',
					data: {
						// 学号
						studentID: this.$data.form.studentID,
						// 学生姓名
						studentName: this.$data.form.studentName,
						// 性别
						gender: sexBool
					},
					success: function() {
						// 携带参数跳转往   绑定邮箱   页面
						// 考虑后期此时就将参数存在 store 中，方便跨组件调用
						_this.$u.route({
							type: 'navigateTo',
							url: '/pages/bindEmail/index',
							params: _this.$data.form
						});
					}
				});
			},
			cancelInfo(value) {
				// 保留方法，不做说明
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		created() {
			// this.$u.post('/user/get/allRegisterInformation').then(res => {
			// 	console.log(res);
			// 	let allInfo = JSON.stringify(res);
			// 	console.log(allInfo);
			// })
		}
	}
</script>

<style>
	/* 整个注册页面加了美化效果 */
	.register-content {
		margin: 0rpx 50rpx;
	}

	/* 对确认信息提示框中的美化 */
	.slot-content {
		text-align: center;
		margin: 20% 0%;
	}
</style>
